<template>
  <div class="kw-score-level" :class="`is-type-${data.level}`">
    <template v-if="isValid">
      <span class="val-num">{{ data.value }}</span>
      <span class="val-unit">{{ data.unit }}</span>
    </template>
    <template v-else>
      <span class="m-font-14">--</span>
    </template>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';

defineOptions({
  name: 'KwScoreLevel'
});

interface Props {
  value: number | string;
}
const props = withDefaults(defineProps<Props>(), {});

const isValid = computed(() => {
  const value = Number(props.value);
  return value === value;
});

const data = computed(() => {
  const value = Number(props.value);
  let level = 0,
    unit = '';
  if (value >= 4.71) {
    level = 3;
    unit = '高';
  } else if (value >= 4.41) {
    level = 2;
    unit = '中';
  } else if (value > 0) {
    level = 1;
    unit = '低';
  } else {
    level = 0;
    unit = '';
  }

  return {
    value: value,
    level: level,
    unit: unit
  };
});
</script>

<style lang="scss" scoped>
.kw-score-level {
  display: inline-flex;
  gap: 2px;
  font-size: 12px;

  // 无
  &.is-type-0 {
    color: #a8abb2;
  }

  // 低
  &.is-type-1 {
    color: #a8abb2;
  }

  // 中
  &.is-type-2 {
    color: #e6a23c;
  }

  // 高
  &.is-type-3 {
    color: #f56c6c;
  }
}
</style>
